<template>
    <view>
        <!-- pages/systemmsg/index.wxml -->
        <view class="page" :style="'padding-bottom:' + marginBottom + 'rpx;'">
            <van-tabs nav-class="nav-class" custom-class="custom-class" :active="active" @change="onChange" title-active-color="#333333" title-inactive-color="#999999">
                <van-tab title="订单交易">
                    <view class="orderbox">
                        <view class="flexbox">
                            <text class="showcolor1">下单成功</text>
                            <text>03-22 10:00</text>
                        </view>
                        <view class="serve">您预约的服务已成功下单，等待美发师接单</view>
                        <view class="wash">
                            <text>服务：洗剪吹</text>
                            <text>预约时间：2021-02-25 14:00</text>
                        </view>
                        <view class="code">订单编号：0988765544233517</view>
                    </view>
                    <view class="orderbox">
                        <view class="flexbox">
                            <text class="showcolor2">下单成功</text>
                            <text>03-22 10:00</text>
                        </view>
                        <view class="serve">您预约的服务已成功下单，等待美发师接单</view>
                        <view class="wash">
                            <text>服务：洗剪吹</text>
                            <text>预约时间：2021-02-25 14:00</text>
                        </view>
                        <view class="code">订单编号：0988765544233517</view>
                    </view>
                    <view class="orderbox">
                        <view class="flexbox">
                            <text class="showcolor3">下单成功</text>
                            <text>03-22 10:00</text>
                        </view>
                        <view class="serve">您预约的服务已成功下单，等待美发师接单</view>
                        <view class="wash">
                            <text>服务：洗剪吹</text>
                            <text>预约时间：2021-02-25 14:00</text>
                        </view>
                        <view class="code">订单编号：0988765544233517</view>
                    </view>
                    <view class="orderbox">
                        <view class="flexbox">
                            <text class="showcolor4">下单成功</text>
                            <text>03-22 10:00</text>
                        </view>
                        <view class="serve">您预约的服务已成功下单，等待美发师接单</view>
                        <view class="wash">
                            <text>服务：洗剪吹</text>
                            <text>预约时间：2021-02-25 14:00</text>
                        </view>
                        <view class="code">订单编号：0988765544233517</view>
                    </view>
                    <view class="orderbox">
                        <view class="flexbox">
                            <text class="showcolor4">下单成功</text>
                            <text>03-22 10:00</text>
                        </view>
                        <view class="serve">您预约的服务已成功下单，等待美发师接单</view>
                        <view class="wash">
                            <text>服务：洗剪吹</text>
                            <text>预约时间：2021-02-25 14:00</text>
                        </view>
                        <view class="code">订单编号：0988765544233517</view>
                    </view>
                </van-tab>
                <van-tab title="系统通知">
                    <view class="msgbox">
                        <view class="flexbox">
                            <text>提现成功</text>
                            <text>03-22 10:00</text>
                        </view>
                        <view class="status">您的提现已成功，请注意查收</view>
                    </view>
                    <view class="msgbox">
                        <view class="flexbox">
                            <text>提现成功</text>
                            <text>03-22 10:00</text>
                        </view>
                        <view class="status">您的提现已成功，请注意查收</view>
                    </view>
                    <view class="msgbox">
                        <view class="flexbox">
                            <text>提现失败</text>
                            <text>03-22 10:00</text>
                        </view>
                        <view class="status">您的提现已成功，请注意查收</view>
                    </view>
                    <view class="msgbox">
                        <view class="flexbox">
                            <text>提现成功</text>
                            <text>03-22 10:00</text>
                        </view>
                        <view class="status">您的提现已成功，请注意查收</view>
                    </view>
                </van-tab>
            </van-tabs>
        </view>
        <tabbar activeIdx="2"></tabbar>
    </view>
</template>

<script>
// pages/systemmsg/index.js.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            active: 1,
            marginBottom: app.globalData.marginBottom,
            imgUrl: app.globalData.imgUrl //全局img路径
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        onChange(event) {
            uni.showToast({
                title: `选择${event.detail.title}`,
                icon: 'none'
            });
        }
    }
};
</script>
<style>
/* pages/systemmsg/index.wxss */
page {
    background: #fbfbfb;
}

.page {
    overflow-y: auto;
}

/* 订单交易 */
.orderbox {
    width: 670rpx;
    height: 246rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    margin: 0 40rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 20rpx 20rpx 20rpx 70rpx;
}

.flexbox {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 34rpx;
}

.flexbox text:nth-child(1) {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 44rpx;
}

.flexbox text:nth-child(2) {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

.serve {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.wash {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    margin: 10rpx 0;
}

.wash text:nth-child(2) {
    margin-left: 40rpx;
}

.code {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.showcolor1 {
    color: #333333;
}

.showcolor2 {
    color: #ff1b0b;
}

.showcolor3 {
    color: #ff8722;
}

.showcolor4 {
    color: #999999;
}

/* 系统消息 */
.msgbox {
    width: 670rpx;
    height: 178rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    margin: 0 40rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 20rpx 20rpx 20rpx 70rpx;
}

.status {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
}

/* vant组件样式 */
.van-tab--active {
    font-size: 32rpx !important;
}

.van-tabs__line {
    background: #ff8722 !important;
}

.van-tabs__nav,
.custom-class {
    background: #fbfbfb !important;
}
</style>
